{{!--
  Hello, friend!

  If you've stumbled upon this file, I assume that you were thinking "Well, I
  have this folder I want to add an icon to, but somehow the icon selector does
  not contain the one I would like to have. But there surely is a way of adding
  more icons, isn't there?"

  And, rejoice, there is! In case you want to have an additional icon added
  here, it's fairly simple. Simply head over to https://clarity.design/icons
  and search for your icon! Once you have found it, simply copy one of the
  icon DIVs and replace the title-attribute with something human-readable, and
  the shape of the CLR-ICON tag with the identifier that describes the icon.

  Just remember the following: Each row always must have the same amount of
  icons to retain the nice grid-like structure, and make sure to never remove
  the first icon (which, obviously, is the opposite of an icon!). Furthermore,
  make sure to keep the sorting of the icons tidy, that is: Try to keep groups
  of icons together, and add your new icon at a position that makes sense!

  Then, a PR will be happily received by us!

  Love,
  the devs <3
 --}}

<div id="icon-selector-popup">
  <div class="row">
    <div class="icon-block" title="Reset icon" data-shape="__reset"></div>
    <div class="icon-block" title="Cog" data-shape="cog"><clr-icon shape="cog"></clr-icon></div>
    <div class="icon-block" title="Cloud" data-shape="cloud"><clr-icon shape="cloud"></clr-icon></div>
    <div class="icon-block" title="Check" data-shape="check"><clr-icon shape="check"></clr-icon></div>
    <div class="icon-block" title="Times" data-shape="times"><clr-icon shape="times"></clr-icon></div>
    <div class="icon-block" title="Help" data-shape="help-info"><clr-icon shape="help-info"></clr-icon></div>
    <div class="icon-block" title="Info" data-shape="info-standard"><clr-icon shape="info-standard"></clr-icon></div>
    <div class="icon-block" title="Success" data-shape="success-standard"><clr-icon shape="success-standard"></clr-icon></div>
    <div class="icon-block" title="Error" data-shape="error-standard"><clr-icon shape="error-standard"></clr-icon></div>
    <div class="icon-block" title="Warning" data-shape="warning-standard"><clr-icon shape="warning-standard"></clr-icon></div>
  </div>
  <div class="row">
    <div class="icon-block" title="Bell" data-shape="bell"><clr-icon shape="bell"></clr-icon></div>
    <div class="icon-block" title="Person" data-shape="user"><clr-icon shape="user"></clr-icon></div>
    <div class="icon-block" title="People" data-shape="users"><clr-icon shape="users"></clr-icon></div>
    <div class="icon-block" title="Folder" data-shape="folder"><clr-icon shape="folder"></clr-icon></div>
    <div class="icon-block" title="Folder (open)" data-shape="folder-open"><clr-icon shape="folder-open"></clr-icon></div>
    <div class="icon-block" title="Image" data-shape="image"><clr-icon shape="image"></clr-icon></div>
    <div class="icon-block" title="Eye" data-shape="eye"><clr-icon shape="eye"></clr-icon></div>
    <div class="icon-block" title="Eye (crossed)" data-shape="eye-hide"><clr-icon shape="eye-hide"></clr-icon></div>
    <div class="icon-block" title="Calendar" data-shape="calendar"><clr-icon shape="calendar"></clr-icon></div>
    <div class="icon-block" title="Calculator" data-shape="calculator"><clr-icon shape="calculator"></clr-icon></div>
  </div>
  <div class="row">
    <div class="icon-block" title="Store" data-shape="store"><clr-icon shape="store"></clr-icon></div>
    <div class="icon-block" title="Shopping bag" data-shape="shopping-bag"><clr-icon shape="shopping-bag"></clr-icon></div>
    <div class="icon-block" title="Shopping cart" data-shape="shopping-cart"><clr-icon shape="shopping-cart"></clr-icon></div>
    <div class="icon-block" title="Factory" data-shape="factory"><clr-icon shape="factory"></clr-icon></div>
    <div class="icon-block" title="Heart" data-shape="heart"><clr-icon shape="heart"></clr-icon></div>
    <div class="icon-block" title="Heart (broken)" data-shape="heart-broken"><clr-icon shape="heart-broken"></clr-icon></div>
    <div class="icon-block" title="Bubbles" data-shape="talk-bubbles"><clr-icon shape="talk-bubbles"></clr-icon></div>
    <div class="icon-block" title="Bubble" data-shape="chat-bubble"><clr-icon shape="chat-bubble"></clr-icon></div>
    <div class="icon-block" title="Bubble (exclamation)" data-shape="bubble-exclamation"><clr-icon shape="bubble-exclamation"></clr-icon></div>
    <div class="icon-block" title="Colour Palette" data-shape="color-palette"><clr-icon shape="color-palette"></clr-icon></div>
  </div>
  <div class="row">
    <div class="icon-block" title="Bars" data-shape="bars"><clr-icon shape="bars"></clr-icon></div>
    <div class="icon-block" title="Thermometer" data-shape="thermometer"><clr-icon shape="thermometer"></clr-icon></div>
    <div class="icon-block" title="Book" data-shape="book"><clr-icon shape="book"></clr-icon></div>
    <div class="icon-block" title="Library" data-shape="library"><clr-icon shape="library"></clr-icon></div>
    <div class="icon-block" title="Bug" data-shape="bug"><clr-icon shape="bug"></clr-icon></div>
    <div class="icon-block" title="Note" data-shape="note"><clr-icon shape="note"></clr-icon></div>
    <div class="icon-block" title="Lightbulb" data-shape="lightbulb"><clr-icon shape="lightbulb"></clr-icon></div>
    <div class="icon-block" title="Trash" data-shape="trash"><clr-icon shape="trash"></clr-icon></div>
    <div class="icon-block" title="Snowflake" data-shape="snowflake"><clr-icon shape="snowflake"></clr-icon></div>
    <div class="icon-block" title="Asterisk" data-shape="asterisk"><clr-icon shape="asterisk"></clr-icon></div>
  </div>
  <div class="row">
    <div class="icon-block" title="Key" data-shape="key"><clr-icon shape="key"></clr-icon></div>
    <div class="icon-block" title="Bolt" data-shape="bolt"><clr-icon shape="bolt"></clr-icon></div>
    <div class="icon-block" title="Wrench" data-shape="wrench"><clr-icon shape="wrench"></clr-icon></div>
    <div class="icon-block" title="Flame" data-shape="flame"><clr-icon shape="flame"></clr-icon></div>
    <div class="icon-block" title="Hourglass" data-shape="hourglass"><clr-icon shape="hourglass"></clr-icon></div>
    <div class="icon-block" title="Briefcase" data-shape="briefcase"><clr-icon shape="briefcase"></clr-icon></div>
    <div class="icon-block" title="Tools" data-shape="tools"><clr-icon shape="tools"></clr-icon></div>
    <div class="icon-block" title="Moon" data-shape="moon"><clr-icon shape="moon"></clr-icon></div>
    <div class="icon-block" title="Sun" data-shape="sun"><clr-icon shape="sun"></clr-icon></div>
    <div class="icon-block" title="Tree" data-shape="tree"><clr-icon shape="tree"></clr-icon></div>
  </div>
  <div class="row">
    <div class="icon-block" title="Circle (dot)" data-shape="dot-circle"><clr-icon shape="dot-circle"></clr-icon></div>
    <div class="icon-block" title="Circle" data-shape="circle"><clr-icon shape="circle"></clr-icon></div>
    <div class="icon-block" title="Video camera" data-shape="video-camera"><clr-icon shape="video-camera"></clr-icon></div>
    <div class="icon-block" title="Film strip" data-shape="film-strip"><clr-icon shape="film-strip"></clr-icon></div>
    <div class="icon-block" title="Microphone" data-shape="microphone"><clr-icon shape="microphone"></clr-icon></div>
    <div class="icon-block" title="Crown" data-shape="crown"><clr-icon shape="crown"></clr-icon></div>
    <div class="icon-block" title="Star" data-shape="star"><clr-icon shape="star"></clr-icon></div>
    <div class="icon-block" title="Flag" data-shape="flag"><clr-icon shape="flag"></clr-icon></div>
    <div class="icon-block" title="Envelope" data-shape="envelope"><clr-icon shape="envelope"></clr-icon></div>
    <div class="icon-block" title="Airplane" data-shape="airplane"><clr-icon shape="airplane"></clr-icon></div>
  </div>
  <div class="row">
    <div class="icon-block" title="Happy emoji" data-shape="happy-face"><clr-icon shape="happy-face"></clr-icon></div>
    <div class="icon-block" title="Neutral emoji" data-shape="neutral-face"><clr-icon shape="neutral-face"></clr-icon></div>
    <div class="icon-block" title="Sad emoji" data-shape="sad-face"><clr-icon shape="sad-face"></clr-icon></div>
    <div class="icon-block" title="Thumbs up" data-shape="thumbs-up"><clr-icon shape="thumbs-up"></clr-icon></div>
    <div class="icon-block" title="Thumbs down" data-shape="thumbs-down"><clr-icon shape="thumbs-down"></clr-icon></div>
    <div class="icon-block" title="Map" data-shape="map"><clr-icon shape="map"></clr-icon></div>
    <div class="icon-block" title="Compass" data-shape="compass"><clr-icon shape="compass"></clr-icon></div>
    <div class="icon-block" title="Map marker" data-shape="map-marker"><clr-icon shape="map-marker"></clr-icon></div>
    <div class="icon-block" title="Flask" data-shape="flask"><clr-icon shape="flask"></clr-icon></div>
    <div class="icon-block" title="CD/DVD" data-shape="cd-dvd"><clr-icon shape="cd-dvd"></clr-icon></div>
  </div>
</div>
